Skip to main content

Code Formatting Guidelines

Overview​

Meall an Óige uses Prettier for consistent code formatting across the project. Prettier is an opinionated code formatter that enforces a consistent style by parsing your code and reprinting it with its own rules.

All code contributions to this project must be formatted with Prettier using the default configuration before submission. This ensures:

  • Consistent code style across the entire codebase
  • Reduced time spent on code reviews discussing formatting
  • Improved readability and maintainability
  • Fewer merge conflicts related to formatting

Installation​

For the best development experience, install the Prettier extension for VS Code:

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X or View → Extensions)
  3. Search for "Prettier - Code formatter"
  4. Click Install

Configuration​

Meall an Óige uses Prettier's default configuration settings. No custom configuration file is required.

Usage​

Automatic Formatting in VS Code​

To enable format-on-save in VS Code:

  1. Open Settings (Ctrl+, or File → Preferences → Settings)
  2. Search for "Format On Save"
  3. Check the box to enable it
  4. Ensure Prettier is set as the default formatter:
    • Search for "Default Formatter" in settings
    • Select "Prettier - Code formatter" from the dropdown

To ensure all committed code is properly formatted, set up a pre-commit hook using Husky and lint-staged:

# Install husky and lint-staged
npm install --save-dev husky lint-staged

# Initialize husky
npx husky install

# Add a pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

Then add this configuration to your package.json:

"lint-staged": {
  "src/**/*.{js,jsx}": [
    "prettier --write"
  ]
}

Enforcing Prettier Usage During Code Reviews​

When reviewing pull requests, verify that the code is properly formatted with Prettier. If it's not, request the contributor to format their code before merging.

Best Practices​

  1. Always format before submitting code - This is a strict requirement
  2. Set up format-on-save in your editor to automatically format as you work
  3. Run the format script before creating pull requests
  4. Don't override Prettier's default settings without team discussion

Troubleshooting​

Conflicts with ESLint​

If you're also using ESLint and experiencing conflicts, install eslint-config-prettier to disable ESLint rules that might conflict with Prettier:

npm install --save-dev eslint-config-prettier

Then add prettier to the end of your extends array in your ESLint configuration:

{
  "extends": ["other-config", "prettier"]
}

IDE-specific Issues​

If Prettier isn't formatting correctly in your IDE:

  • Make sure the Prettier extension is installed and enabled
  • Check that no other formatting extensions are conflicting
  • Restart your IDE after configuration changes

Summary​

  • Use Prettier with default configuration
  • Format all code before submission (no exceptions)
  • Configure your editor for format-on-save
  • Set up pre-commit hooks to enforce formatting